JavaWeb回顾与小结(二)

您所在的位置：网站首页 › jar 全称 › JavaWeb回顾与小结(二)

JavaWeb回顾与小结(二)

2023-05-05 09:18| 来源: 网络整理| 查看: 265

Ajax Ajax介绍概念

Asynchronous JavaScript And XML,异步的JS和XML

作用数据交换:通过Ajax可以给服务器发送请求,并获取服务器响应的数据异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术原生Ajax

准备数据地址

创建XMLHttpRequest对象:用于和服务器交换数据向服务器发送请求获取服务器响应数据 Axios介绍&使用介绍

Axios是对原生Ajax进行了封装,简化书写,快速开发

入门引入Axios的js文件

使用Axios发送请求,并获取响应结果 axios.get("http://yapi.smart-xwork.cn/").then((result) => { console.log(result.data); }); axios.post("http://yapi.smart-xwork.cn/","id=1").then((result) => { console.log(result.data); }); 前后端分离开发介绍弊端沟通成本高分工不明确不便管理不便维护扩展接口文档原型+需求指的是后端程序对外暴露的一个可以访问的入口,一个接口包括:url地址,请求方式,请求参数,响应结果示例开发流程需求分析接口定义(接口文档) 前后端并行开发(遵守规范) 测试(前后端联调) Yapi 介绍

Yapi是高效,易用,功能强大的api管理平台,旨在为开发,产品,测试人员提供更优雅的接口管理服务 http://yapi.smart-xwork.cn/

步骤添加项目添加分类添加接口编辑接口高级mock 编写模拟数据前端工程化介绍

在企业级开发中,把前端开发所需的工具,技术,流程,经验等进行规范化,标准化

模块化组件化规范化自动化 src文件 assets---静态资源 components---可重用的组件 router---路由配置 views---视图组件(页面) App.vue---入口页面(根组件) main.js---入口js文件环境准备依赖NodeJS

npm的全称是(Node Package Manager),是随同NodeJS一起安装的包管理和分发工具,它很方便让js开发者下载,安装,上传以及管理已经安装的包

Vue-cli是官方提供的脚手架统一的目录结构本地调试热部署单元测试集成打包上线 Vue项目简介项目创建

方式一:命令行 vue create vue-project01

方式二:图形化界面(推荐) vue ui

标准目录结构 node_modules---整个项目的依赖包 public---存放项目的静态文件 src---存放项目的源代码 package.json---模块基本信息,项目开发所需模块,版本信息 vue.config.js---保存vue配置的文件,如代理,端口的配置等启动方式一:图形化界面方式二:命令行 npm run serve 配置端口

vue.config.js文件中修改项目启动的端口号

devServer:{ port:7000, }) Vue项目开发流程 Vue的组件文件以vue结尾,每个组件由三个部分组成: 内部必须只有一个根元素编写JS代码定义CSS样式使用组件的三个步骤步骤3:在中以标签形式使用刚才注册的组件直接做步骤3,工具会自动补全1,2 步骤1:在标签中使用import语法导入需要的组件步骤2:在export default中使用components节点注册组件 Vue组件库Element 介绍

是饿了么团队研发的,一套为开发者,设计师和产品经理准备的基于Vue2.0的桌面端组件库

组件

组成网页的部件,如超链接,按钮,图片,表格,表单,分页条等等

快速入门在当前工程的根目录下,安装ElementUI组件库,在命令行执行命令 npm install [email protected] 在main.js中引入ElementUI组件库 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI) 创建views/element/ElementView.vue组件,访问ElementUI官网,复制组件代码修改App.vue,加载ElementView.vue组件常见组件表格Table 分页Pagination 对话框Dialog 表单Form Vue路由介绍

Vue Router是Vue的官方路由

组成 VueRouter:路由器,根据请求路径在路由表中匹配对应的组件渲染 :链接组件,浏览器会解析成 :动态视图组件,用来渲染展示与路由路径对应的组件步骤安装(创建Vue项目时已选择,不用操作) 定义路由表 import router from './router' 打包部署介绍

Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,其特点是占有内存少,并发能力强,在各大型互联网公司都有非常广泛的使用

部署

将打包好的dist目录下文件,复制到nginx安装目录的html目录下

启动

双击nginx.exe文件,Nginx服务器默认占用80端口号若被占用,在nginx.conf中修改端口号

Maven 一款用于管理和构建java项目的工具,其作用如下依赖管理:方便快捷的管理项目依赖的资源(jar包),避免版本冲突问题统一项目结构:提供标准,统一的项目结构项目构建:标准跨平台(Linux,Windows,MacOS)的自动化项目构建方式概述结构模型和仓库

项目对象模型(POM)---依赖管理模型(Dependency)

仓库:用于存储资源,管理各种jar包本地仓库:自己计算机上的一个目录中央仓库:由Maven团队维护的全球唯一仓库安装步骤解压apache-maven-3.6.1.zip(路径中不要有中文) 解压maven_repository.zip(本地仓库) 打开apache-maven-3.6.1/conf中的settings.xml文件,在标签中配置本地仓库将maven的bin目录加入到系统Path环境变量 IDEA集成Maven 配置Maven环境当前工程选择IDEA中的file---Settings---Build,Execution,Deployment---BuildTools---Maven 设置IDEA使用本地安装的Maven,并修改配置文件及本地仓库路径创建Maven项目步骤创建模块,选择Maven,点击Next 填写模块名称,坐标信息,点击finish,创建完成编写HelloWorld,并运行 Maven坐标 Maven中的坐标是资源(项目或者jar包)的唯一标识,通过该坐标可以唯一定位资源位置使用坐标来定义项目或引入项目中需要的jar包坐标主要组成GAV groupId

定义当前Maven项目隶属组织名称(通常是域名反写,例如:com.itheima)

artifactId

定义当前Maven项目名称(通常是模块名称,例如order-service,goods-service)

version

定义当前项目版本号

导入Maven项目方式一:

在IDEA总,选择右侧Maven面板,点击+号,选中对应项目的pom.xml文件,点击ok

方式二:

选择file---project structure---modules---import module,选中对应项目的pom.xml文件,点击ok

依赖管理依赖管理指当前项目中所需要的jar包,一个项目中可以引入多个依赖在pom.xml中编写标签在标签中使用引入坐标定义坐标的三要素:groupId,artifactId,version 点击刷新按钮注意

如果引入的依赖,在本地仓库不存在,将会连接远程仓库/中央仓库,然后下载依赖.(这个过程比较耗时,耐心等待)

依赖传递依赖具有传递性直接依赖

在当前项目中通过依赖配置建立的依赖关系

间接依赖

被依赖的资源如果依赖其他资源,当前项目间接依赖其他资源

排除依赖

指主动断开依赖的资源,被排除的资源无需指定版本

依赖范围定义

依赖的jar包,默认情况下,可以在任何地方使用,可以通过设置其作用范围

scope值 compile(默认)

主程序范围有效(main文件夹范围内) 99%坐标都不用写scope,默认compile

test

测试程序范围有效(test文件夹范围内)

provided

是否参与打包

生命周期

Maven构建项目生命周期描述的是一次构建过程经历经历了多少个事件/阶段

Maven中有3套互相独立的生命周期 clean:清理工作 clean default:核心工作如编译,测试,打包,安装,部署等 compile,test,package,install site:生成报告,发布站点等执行指定生命周期的两种方式方式一:在idea中,右侧的maven工具栏,选中对应的生命周期,双击执行方式二:在命令行中,通过命令执行 springboot 编写步骤创建springboot工程,填写模块信息,并勾选web开发相关依赖创建请求处理类,添加请求处理方法,并添加注解运行启动类,打开浏览器测试 HTTP协议概述

Hyper Text Transfer Protocol,超文本传输协议,规定了浏览器和服务器之间数据传输的规则

特点基于TCP协议:面向连接,安全基于请求-响应模型的:一次请求对应一次响应 HTTP协议是无状态的协议:对于事务处理没有记忆能力,每次请求-响应都是独立的

缺点:多次请求间不能共享数据优点:速度快

请求数据格式请求行:请求数据的第一行请求头:从请求数据第二行开始,key/value键值对格式请求体:POST请求才有,保存POST请求参数携带参数 GET请求参数在地址栏后面使用问号拼接 POST请求参数在请求体中携带响应数据格式响应行:响应数据第一行响应头:从响应数据第二行开始,key.value键值对格式响应体:响应正文状态码 200:客户端请求成功,服务器也响应成功了 404:请求资源不存在,一般是客户端URL路径错了 500:服务器java代码发生了异常 Web服务器-Tomcat 简介 Web服务器是一个软件程序,对HTTP协议的操作进行封装,使得程序员不必直接对协议进行操作,让Web开发更加便捷.主要功能是"提供网上信息浏览服务" tomcat,一个轻量级的web服务器,支持servlet,jsp等少量javaEE规范,Web项目部署到tomcat服务器中才可以被用户访问到基本使用绿色版解压使用,卸载可直接删除目录启动tomcat 双击 bin\startup.bat 关闭tomcat 直接关掉运行窗口(强制关闭) bin\shutdown.bat(正常关闭) Ctrl+C(正常关闭) tomcat部署项目将项目放置到webapps目录下,即部署完成端口号冲突方案一:任务管理器--详细信息--搜索java--全部结束掉方案二:修改tomcat端口号(conf/server.xml) springboot内置tomcat 起步依赖 spring-boot-starter-web:包含了web应用开发所需要的常见依赖 spring-boot-starter-test:包含了单元测试所需要的常见依赖官方提供有starter 切换web服务器

springboot内嵌web容器有三种:tomcat,jetty,undertow

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章